<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 值绑定和修饰符</title>
</head>
<style>
    .template{
        margin: 5% 10%;
    }
</style>
<body>
<div id="app">

    <div class="template">
        <label for="checkbox">
            <input type="checkbox" id="checkbox" v-model="checkbox" v-bind:value="checkbox">男
            <br>
        </label>
    </div>

    <div class="template">
        <label v-bind:for="'user_no' + user.id" v-for="user in usersList">
            <input type="checkbox" v-bind:value="user.username" v-bind:id="'user_no' + user.id" v-model="checkUsersList">
            <span>{{'用户名:'+  user.username}}</span>
            <br>
        </label>

        {{'被选中的选项::' + checkUsersList}}
    </div>

    <div class="template">
        <label for="radio1">
            <input type="radio" id="radio1" v-bind:value="true" v-model="checkRadio">男
        </label>

        <label for="radio2">
            <input type="radio" id="radio2" v-bind:value="false" v-model="checkRadio">女
        </label>

        {{'被选中的选项::' + (checkRadio? '男':'女')}}
    </div>

    <div class="template">
        <select name="select" id="select" v-model="checkOptionList">
            <option v-for="option in optionList" v-bind:value="option.price">{{option.role}}</option>
        </select>
        {{checkOptionList}}
    </div>

    <div class="template">
        <input type="text" v-model.lazy="text">{{text}}
    </div>

</div>

<script src="../js/vue.js"></script>
<script>

    const message = {
        text:'请输入身份号',
        checkOptionList:[],
        optionList:[
            {
                id : 1,
                role : '老板',
                price : 1308888,
            },
            {
                id : 2,
                role : '经理',
                price : 23000,
            },
            {
                id : 3,
                role : '员工',
                price : 3000,
            },
        ],
        checkRadio:true,
        checkbox:true,
        checkUsersList:[],
        usersList:[
            {
                id : 1,
                username : '张三',
                password : '123456'
            },
            {
                id : 2,
                username : '李四',
                password : '123456'
            },
            {
                id : 3,
                username : '王五',
                password : '123456'
            },
        ]
    };

    //数据冻结, 禁止调试
    //Object.freeze(message)

    const demo = new Vue({
        el: '#app',
        data: message,
        methods: {

        },
        computed: {}
    });
</script>
</body>
</html>